import React from 'react';
import { Space, Table, Input, Select } from 'antd';
import { connect, FormattedMessage } from 'umi';
import request from '@/utils/request';

const { Search } = Input;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      dataSource: [],
      partType: '',
    };
  }
  componentDidMount() {
    //this.fetchDatas();
  }
  fetchDatas = () => {
    const { pageIndex, keywords, pageSize, partType } = this.state;
    const { pType, inActive } = this.props;
    let ptype = pType ? pType : partType;
    ptype = ptype === 'ALL' ? '' : ptype;
    this.setState({ loading: true });
    request('/api/services/app/Part/GetParts', {
      method: 'GET',
      params: {
        skipCount: (pageIndex - 1) * pageSize,
        maxResultCount: pageSize,
        keywords,
        pType: ptype,
        inActive,
      },
    }).then((response) => {
      if (response) {
        if (response.success) {
          this.setState({
            dataSource: response.result?.items,
            loading: false,
            totalCount: response.result?.totalCount,
          });
        }
      }
      this.setState({ loading: false });
    });
  };
  setCurrent = (part?: any) => {
    if (this.props.setPart) {
      this.props.setPart(part);
    }
  };
  onSearch = (keywords: string) => {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const _this = this;
    this.setState({ keywords }, function () {
      _this.fetchDatas();
    });
  };
  render() {
    const { loading, dataSource, totalCount, pageSize } = this.state;

    const columns = [
      {
        title: <FormattedMessage id="partNum" />,
        dataIndex: 'partNum',
        key: 'partNum',
        width: 150,
      },
      {
        title: <FormattedMessage id="partDescription" />,
        dataIndex: 'partDescription',
        key: 'partDescription',
        ellipsis: true,
      },
      {
        title: <FormattedMessage id="types" />,
        dataIndex: 'typeCode',
        key: 'typeCode',
        width: 60,
      },
    ];
    return (
      <>
        <Table
          title={() => (
            <Space>
              <Search placeholder="keywords" allowClear enterButton onSearch={this.onSearch} />
              <Select
                defaultValue="ALL"
                onChange={(v: any) => this.setState({ partType: v })}
                style={{ width: 100 }}
              >
                <Select.Option value="ALL">
                  <FormattedMessage id="All" />
                </Select.Option>
                <Select.Option value="P">
                  <FormattedMessage id="pType" />
                </Select.Option>
                <Select.Option value="M">
                  <FormattedMessage id="mType" />
                </Select.Option>
              </Select>
            </Space>
          )}
          onRow={(record) => {
            return {
              onClick: () => {},
              onDoubleClick: () => {
                this.setCurrent(record);
              },
            };
          }}
          pagination={{
            onChange: (page) => {
              this.setState({ pageIndex: page }, () => {
                this.fetchDatas();
              });
            },
            pageSize,
            total: totalCount,
          }}
          rowKey="id"
          size="small"
          columns={columns}
          dataSource={dataSource}
          loading={loading}
        />
      </>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
